cascading style sheets guide

Padding

With cascading style sheets, any element can have padding. Padding is the space between the edge of an element (its border) and its contents. There can be padding to the left, top, bottom and right of any element. The padding properties are:

padding-top, padding-left, padding-bottom, padding-right, padding
What it does

The padding properties set the top, left, bottom, right and all paddings respectively.

Possible Values

padding can be specified as either a percentage, a length or using the keyword auto.

Padding can take negative values.

Percentages

A percentage padding value sets the affected padding to that percentage of the width of the parent element. For instance, a padding-right: 20% sets the width of the top padding to 20% of the width of the element which contains the element.

Length Values

We cover length values in detail in our section on values. With length values, you can set the padding to an absolute value, or a value relative to the size of the element itself.

Default Values

If no padding value is specified, the padding of an element is zero. That is, there is no space between the edge of an element and the contents of the element.

Is it inherited?

An element does not inherit the padding property of the element which contains it.

Hints and suggestions

Padding can be used to achieve similar effects to the positioning properties which we discuss below and margins (which is discussed directly above).